<template>
	<div class="add-goods table-theme" v-if="goodsInfo">
		<head-back-title title="编辑商品"></head-back-title>
		<el-card>
			<el-form :model="goodsInfo" :rules="goodsRules" ref="goodsInfo" label-width="120px">
				<p class="title" style="font-size: 20px;">商品信息</p>
				<div class="goods-info">
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="商品名称:" prop="goods_name"><el-input v-model="goodsInfo.goods_name" placeholder="请输入商品名称"></el-input></el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="工厂货号:" prop="lining_sn"><el-input v-model="goodsInfo.lining_sn" placeholder="请输入工厂货号"></el-input></el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="平台款号:" prop="goods_sn"><el-input v-model="goodsInfo.goods_sn" placeholder="请输入平台款号"></el-input></el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="出厂价格:" prop="factory_price">
								<el-input v-model="goodsInfo.factory_price" type="number" placeholder="请输入内容"><i slot="suffix">元</i></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="货期:" prop="send_id">
								<el-select v-model="goodsInfo.send_id" placeholder="请选择">
									<el-option v-for="(data,index) in sendList" :key="index" :label="data.send_name" :value="data.send_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="安装方式:" prop="install_id">
								<el-select v-model="goodsInfo.install_id" placeholder="请选择">
									<el-option value="1" label="整装"></el-option>
									<el-option value="2" label="组装"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="风格分类:" prop="style_id">
								<el-select v-model="goodsInfo.style_id" placeholder="请选择">
									<el-option v-for="item in StyleList" :key="item.style_id" :label="item.style_name" :value="item.style_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="空间分类:" prop="space_id">
								<el-select v-model="goodsInfo.space_id" placeholder="请选择">
									<el-option v-for="item in SpaceList" :key="item.space_id" :label="item.space_name" :value="item.space_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="品类分类:" prop="class_id">
								<el-select v-model="goodsInfo.class_id" placeholder="请选择">
									<el-option v-for="item in ClassList" :key="item.class_id" :label="item.class_name" :value="item.class_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="材质:" prop="texture_id">
								<el-select v-model="goodsInfo.texture_id" placeholder="请选择">
									<el-option v-for="item in TextureList" :key="item.texture_id" :label="item.texture_name" :value="item.texture_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="填充物:" prop="filler_id">
								<el-select v-model="goodsInfo.filler_id" placeholder="请选择">
									<el-option value="1" label="高密度海绵"></el-option>
									<el-option value="2" label="公子棉"></el-option>
									<el-option value="3" label="乳胶"></el-option>
									<el-option value="4" label="羽绒"></el-option>
									<el-option value="5" label="弹簧包"></el-option>
									<el-option value="6" label="太空棉"></el-option>
									<el-option value="7" label="其他"></el-option>
									<el-option value="8" label="无"></el-option>
									<el-option value="9" label="海绵+羽绒"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="工艺:" prop="craft_id">
								<el-select v-model="goodsInfo.craft_id" placeholder="请选择">
									<el-option value="1" label="手工雕刻工艺"></el-option>
									<el-option value="3" label="钢琴烤漆工艺"></el-option>
									<el-option value="4" label="复古铜钉工艺"></el-option>
									<el-option value="5" label="水晶拉扣工艺"></el-option>
									<el-option value="6" label="仿古做旧工艺"></el-option>
									<el-option value="7" label="皮拉扣工艺"></el-option>
									<el-option value="8" label="不锈钢拉丝工艺"></el-option>
									<el-option value="9" label="不锈钢镀金工艺"></el-option>
									<el-option value="10" label="喷金工艺"></el-option>
									<el-option value="11" label="描金工艺"></el-option>
									<el-option value="12" label="描银工艺"></el-option>
									<el-option value="13" label="拼花工艺"></el-option>
									<el-option value="14" label="间棉工艺"></el-option>
									<el-option value="15" label="其他"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="包装件数:" prop="pack_id">
								<el-select v-model="goodsInfo.pack_id" placeholder="请选择">
									<el-option v-for="(data,index) in packList" :key="index" :label="data.pack_name" :value="data.pack_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="包装体积:" prop="bulk">
								<el-input v-model="goodsInfo.bulk" placeholder="请输入包装体积"><i slot="suffix">m³</i></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="服务:" prop="save_id">
								<el-select v-model="goodsInfo.save_id" placeholder="请选择">
									<el-option v-for="(data,index) in serveList" :key="index" :label="data.serve_name" :value="data.serve_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="库存:" prop="number"><el-input v-model="goodsInfo.number" placeholder="请输入内容"></el-input></el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="商品产地:" prop="lining_address"><el-input v-model="goodsInfo.lining_address" placeholder="请输入内容"></el-input></el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="标签:" prop=""><el-input v-model="goodsInfo.label_id" placeholder="多个标签请用斜杠( / )隔开"></el-input></el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="物流:" prop="express_id">
								<el-select v-model="goodsInfo.express_id" placeholder="请选择">
									<el-option v-for="(data,index) in expressList" :key="index" :label="data.express_name" :value="data.express_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="物流费用:" prop="express_price"><el-input v-model="goodsInfo.express_price" placeholder="请输入内容"></el-input></el-form-item>
						</el-col>
						<el-col :span="10">
							<el-form-item label="推荐商品:" prop="">
								<el-input v-model="goodsInfo.recommend_good" placeholder="请输入推荐商品编号...多个商品请用斜杠( / )隔开"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="14">
							<el-form-item label="商品包含:" prop="contain">
								<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="goodsInfo.contain"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="14">
							<el-form-item label="商品简介:" prop="brief">
								<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="goodsInfo.brief"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<div class="add-sku-view">
						<p class="title" style="font-size: 20px;">商品SKU</p>

						<div class="add-sku-form">
							<el-form :model="CreateSkuForm" status-icon :rules="CreateSkuRules" ref="CreateSkuForm" label-width="100px">
								<p style="margin: 20px 10px;">尺寸</p>
								<div class="add-sku-form-item">
									<el-form-item label="" prop="size"><el-input v-for="(size, index) in sizeList" :key="index" v-model="size.value"></el-input></el-form-item>
									<div class="add-sku-form-menu">
										<span @click="addInput(0)">+添加</span>
										<span @click="reset(0)">重置</span>
									</div>
								</div>
								<div class="add-sku-form-item" style="margin-top: 20px; margin-bottom: 10px;">
									<el-form-item label="" prop="name_color">
										<el-input v-model="CreateSkuForm.name_color" placeholder="请输入规格名称如：颜色"></el-input>
									</el-form-item>
								</div>
								<div class="add-sku-form-item">
									<el-form-item label="" prop="color"><el-input v-for="(size, index) in colorList" :key="index" v-model="size.value"></el-input></el-form-item>
									<div class="add-sku-form-menu">
										<span @click="addInput(1)">+添加</span>
										<span @click="reset(1)">重置</span>
									</div>
								</div>
								<el-form-item label="" class="upload-box" prop="color_img_vice_middle" style="padding-left: 10px;margin-top: 20px;">
									<div class="case-img-upload">
										<!-- SKU图 -->
										<div class="case-img-upload-btns">
											<el-upload ref="upload" :file-list="skuImageListPreview" :limit="maxUpimage" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 0); } " accept="image/*" > <el-button type="primary" size="small">上传图片</el-button>
											</el-upload>
											<el-button type="danger" size="small" @click="restImg('sku')">重置</el-button>
											<div class="el-upload__tip">
												<p style="color: red;">(可以传{{ colorList.length }}张图)</p>
												800*800像素<500KB
											</div>
										</div>
										<div class="case-img-upload-imgs">
											<div v-for="(data, index) in colorList" :key="index" class="vice_big_box">
												<el-image :preview-src-list="skuImageList" :src="skuImageList[index]" fit="contain">
													<div slot="error" class="image-slot"></div>
												</el-image>
											</div>
										</div>
									</div>
								</el-form-item>
								<div class="add-sku-form-item" style="margin-top: 20px; margin-bottom: 10px;">
									<el-form-item label="" prop="name_lining">
										<el-input v-model="CreateSkuForm.name_lining" placeholder="请输入规格名称如：材质"></el-input>
									</el-form-item>
								</div>
								<div class="add-sku-form-item">
									<el-form-item label="" prop="lining"><el-input v-for="(size, index) in liningList" :key="index" v-model="size.value"></el-input></el-form-item>
									<div class="add-sku-form-menu">
										<span @click="addInput(2)">+添加</span>
										<span @click="reset(2)">重置</span>
									</div>
								</div>
							</el-form>
						</div>

						<div class="add" style="display: flex;justify-content: center;padding: 20PX 0;">
							<el-button type="primary" @click="CreateSku('goodsInfo')">添加sku</el-button>
						</div>
					</div>
					<p class="title" v-if="newSkuLists.length != 0">新增sku信息</p>
					<el-table :data="newSkuLists" border class="factory-table" v-if="newSkuLists.length != 0">
						<el-table-column label="序号" align="center" prop="id" width="80"></el-table-column>
						<el-table-column label="工厂款号" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.sku_lining_sn" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="sku款号" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.sku_sn" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="尺寸" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.size" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="材质" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.lining" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="颜色" align="center" width="120">
							<template slot-scope="scope">
								<el-input v-model="scope.row.color" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="图片" align="center" width="80">
							<template slot-scope="scope">
								<ImgPopover :src="scope.row.img"></ImgPopover>
							</template>
						</el-table-column>
						<el-table-column label="出厂价" align="center" width="90">
							<template slot-scope="scope">
								<el-input v-model="scope.row.factory_price" type="number" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="零售价" align="center" width="90">
							<template slot-scope="scope">
								<el-input v-model="scope.row.retail_price" type="number" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="保险" align="center" width="100">
							<template slot-scope="scope">
								<el-switch v-model="scope.row.is_insure" :active-value="1" :inactive-value="0"></el-switch>
							</template>
						</el-table-column>
						<el-table-column label="包件" align="center" width="70">
							<template slot-scope="scope">
								<el-input v-model="scope.row.pack" placeholder="请输入内容"></el-input>
								<!-- <el-select v-model="scope.row.pack" placeholder="请选择">
									<el-option
										v-for="(data, index) in packList"
										:key="index"
										:label="data.pack_name"
										:value="data.pack_id"
									></el-option>
								</el-select> -->
							</template>
						</el-table-column>
						<el-table-column label="体积" align="center" width="70">
							<template slot-scope="scope">
								<el-input v-model="scope.row.bulk" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="起售量" align="center" width="50">
							<template slot-scope="scope">
								<el-input v-model="scope.row.coefficient_num" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="库存" align="center" width="70">
							<template slot-scope="scope">
								<el-input v-model="scope.row.number" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" width="80">
							<template slot-scope="scope">
								<el-button type="danger" size="mini" @click="delSku(0, scope.$index)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<p class="title" style="margin-top: 10px;" v-if="skuLists.length != 0">原sku信息</p>
					<el-table :data="skuLists" border class="factory-table" v-if="skuLists.length != 0">
						<el-table-column label="序号" align="center" prop="id" width="80"></el-table-column>
						<el-table-column label="工厂款号" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.sku_lining_sn" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="sku款号" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.sku_sn" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="尺寸" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.size" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="材质" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.lining" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="颜色" align="center" width="120">
							<template slot-scope="scope">
								<el-input v-model="scope.row.color" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="图片" align="center" width="80">
							<template slot-scope="scope">
								<el-upload class="avatar-uploader" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res,4,scope.$index);}">
									<ImgPopover :src="scope.row.img"></ImgPopover>
								</el-upload>
							</template>
						</el-table-column>
						<el-table-column label="出厂价" align="center" width="90">
							<template slot-scope="scope">
								<el-input v-model="scope.row.factory_price" type="number" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="保险" align="center" width="100">
							<template slot-scope="scope">
								<el-switch v-model="scope.row.is_insure" :active-value="1" :inactive-value="0"></el-switch>
							</template>
						</el-table-column>
						<!-- <el-table-column label="零售价" align="center" width="90">
							<template slot-scope="scope">
								<el-input v-model="scope.row.retail_price" type="number" placeholder="请输入内容" disabled></el-input>
							</template>
						</el-table-column> -->
						<el-table-column label="包件" align="center" width="70">
							<template slot-scope="scope">
								<el-input v-model="scope.row.pack" placeholder="请输入内容"></el-input>
								<!-- <el-select v-model="scope.row.pack" placeholder="请选择">
									<el-option
										v-for="(data, index) in packList"
										:key="index"
										:label="data.pack_name"
										:value="data.pack_id"
									></el-option>
								</el-select> -->
							</template>
						</el-table-column>
						<el-table-column label="体积" align="center" width="70">
							<template slot-scope="scope">
								<el-input v-model="scope.row.bulk" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="起售量" align="center" width="50">
							<template slot-scope="scope">
								<el-input v-model="scope.row.coefficient_num" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="库存" align="center" width="70">
							<template slot-scope="scope">
								<el-input v-model="scope.row.number" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" width="80">
							<template slot-scope="scope">
								<el-button type="danger" size="mini" @click="delSku(1, scope.$index, scope.row.sku_id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="goods-image">
						<el-form :model="imageForm" status-icon :rules="imageRules" ref="imageForm" label-width="100px">
							<p class="title" style="font-size: 20px;margin-top: 20px;">商品图片</p>
							<div class="case_upload clearfix">
								<el-col :span="6">
									<el-form-item label="上传主图:" class="upload-box" prop="major_img_big">
										<div class="case-img-upload">
											<div class="case-img-upload-btns">
												<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 1); } " > <el-button type="primary" size="small">上传图片</el-button>
												</el-upload>
												<div class="el-upload__tip">800*800像素<500KB</div>
											</div>
											<div class="case-img-upload-imgs">
												<el-image :src="imageForm.major_img_big"><div slot="error"></div></el-image>
											</div>
										</div>
									</el-form-item>
								</el-col>
								<el-col :span="18">
									<el-form-item label="上传附图(最多4张):" class="upload-box" prop="vice_img_vice_middle">
										<div class="case-img-upload">
											<div class="case-img-upload-btns">
												<el-upload ref="upload" :file-list="vice_img_vice_preview" :limit="4" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 2); } " multiple accept="image/*" > <el-button type="primary" size="small">上传图片</el-button>
												</el-upload>
												<el-button type="danger" size="small" @click="restImg('vice')">重置</el-button>
												<div class="el-upload__tip">800*800像素<500KB</div>
											</div>
											<div class="case-img-upload-imgs">
												<el-image v-if="!vice_img_vice_middle.length"><div slot="error"></div></el-image>
												<div v-for="(data, index) in vice_img_vice_middle" :key="index" class="vice_big_box" v-else>
													<i class="el-icon-error" @click="delVice(index, 1)"></i>
													<el-image :preview-src-list="vice_img_vice_middle" :src="data" fit="contain"></el-image>
												</div>
											</div>
										</div>
									</el-form-item>
								</el-col> <el-col :span="24">
									<el-form-item label="上传视频:" class="upload-box">
										<div class="case-img-upload">
											<div class="case-img-upload-btns">
												<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return uploadVideo(res); } " accept="video/mp4,avi" > <el-button type="primary" size="small">上传视频</el-button>
												</el-upload>
												<el-button type="danger" size="small" @click="restImg('video')">重置</el-button>
												<div class="el-upload__tip">小于20MB</div>
											</div>
											<div class="case-img-upload-imgs">
												<el-image v-show="!goodsInfo.video"><div slot="error"></div></el-image>
												<div class="vice_big_box" style="width: 500px; margin-left: 25px;" v-show="goodsInfo.video">
													<video-player id="video" ref="videoPlayer" class="vjs-custom-skin" :playsinline="true" :options="playerOptions" />
												</div>
											</div>
										</div>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="上传详情图:" class="upload-box" prop="info_img">
										<vue-sortable-img :list="info_img" @change="getInfoImg"></vue-sortable-img>
									</el-form-item>
								</el-col>
								<el-col :span="24"><el-form-item></el-form-item></el-col>
							</div>
						</el-form>
					</div>
				</div>
			</el-form>
			<div class="add" style="display: flex;justify-content: center;padding: 20PX 0;"><el-button type="primary" @click="UploadProduct">保存并上架</el-button></div>
		</el-card>
	</div>
</template>

<script>
import {packList,serveList,sendList,expressList} from '@/assets/api/JSON'
import VueSortableImg from '@/components/VueSortableImg';
import md5 from 'md5';
import ImgPopover from '@/components/ImgPopover';
export default {
	components: {
		ImgPopover,
		VueSortableImg
	},
	data() {
		return {
			NewinfoImg:[],
			packList: packList,
			serveList: serveList,
			sendList: sendList,
			expressList: expressList,
			admin_id: localStorage.getItem('admin_id'),
			vice_img_vice_big: [], // 大副图
			vice_img_vice_middle: [], // 副图
			vice_img_vice_preview:[], // 副图预览
			vice_middle: [],
			vice_big: [],
			info_img: [], // 详情图
			skuImageList: [], // sku图
			skuImageListPreview: [], // sku图预览
			newSkuLists: [],
			skuLists: [],
			DataCompare: {
				newSkuLists: [],
				skuLists: []
			}, // 数据比对
			goodsInfo: {
				factory_id: localStorage.getItem('factory_id'),
				goods_name: '',
				lining_sn: '',
				goods_sn: '',
				number: '',
				factory_price: '',
				send_id: '',
				install_id: '',
				style_id: '',
				space_id: '',
				class_id: '',
				texture_id: '',
				filler_id: '',
				craft_id: '',
				pack_id: '',
				bulk: '',
				save_id: '',
				express_id: '',
				express_price: '',
				lining_address: '',
				recommend_good: '',
				contain: '',
				brief: '',
				label_id: '',
				video: '',
				major_img_big: '',
				major_img_middle: '',
				major_img_thumb: '',
				major_img_small: '',
				vice_img_vice_big: '',
				vice_img_vice_middle: '',
				info_img: '',
				color_img_vice_thumb: '',
				color_img_vice_middle: '',
				color_img_vice_big: '',
				name_color: '',
				name_lining: '',
				name_size: '',
				upimg: ''
			},
			goodsRules: {
				goods_name: [{ required: true, message: '必填项不能为空' }],
				lining_sn: [{ required: true, message: '必填项不能为空' }],
				goods_sn: [{ required: true, message: '必填项不能为空' }],
				number: [{ required: true, message: '必填项不能为空' }],
				factory_price: [{ required: true, message: '必填项不能为空' }],
				send_id: [{ required: true, message: '必填项不能为空' }],
				install_id: [{ required: true, message: '必填项不能为空' }],
				style_id: [{ required: true, message: '必填项不能为空' }],
				space_id: [{ required: true, message: '必填项不能为空' }],
				class_id: [{ required: true, message: '必填项不能为空' }],
				texture_id: [{ required: true, message: '必填项不能为空' }],
				filler_id: [{ required: true, message: '必填项不能为空' }],
				craft_id: [{ required: true, message: '必填项不能为空' }],
				pack_id: [{ required: true, message: '必填项不能为空' }],
				bulk: [{ required: true, message: '必填项不能为空' }],
				save_id: [{ required: true, message: '必填项不能为空' }],
				express_id: [{ required: true, message: '必填项不能为空' }],
				express_price: [{ required: true, message: '必填项不能为空' }],
				lining_address: [{ required: true, message: '必填项不能为空' }],
				brief: [{ required: true, message: '必填项不能为空' }],
				label_id: [{ required: true, message: '必填项不能为空' }]
			},
			imageForm: {
				info_img: '',
				major_img_big: '',
				vice_img_vice_middle: ''
			},
			imageRules: {
				info_img: [{ required: true, message: '必填项不能为空' }],
				major_img_big: [{ required: true, message: '必填项不能为空' }],
				vice_img_vice_middle: [{ required: true, message: '必填项不能为空' }]
			},
			StyleList: [], // 风格
			SpaceList: [], // 空间
			TextureList: [], // 材质
			ClassList: [], // 品类
			CreateSkuForm: {
				size: '',
				lining: '',
				color: '',
				name_lining: '材质',
				name_color: '颜色',
				color_img_vice_middle: ''
			},
			CreateSkuRules: {
				size: [{ required: true, message: '请输入尺寸' }],
				lining: [{ required: true, message: '请输入内容' }],
				color: [{ required: true, message: '请输入内容' }],
				color_img_vice_middle: [{ required: true, message: '请上传图片' }]
			},
			sizeList: [
				{
					value: ''
				}
			],
			colorList: [
				{
					value: ''
				}
			],
			liningList: [
				{
					value: ''
				}
			],
			playerOptions: {
				playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
				autoplay: false, // 如果true,浏览器准备好时开始回放。
				preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
				language: 'zh-CN',
				aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
				fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
				sources: [
					{
						type: 'video/mp4',
						src: ''
					}
				],
				hls: true,
				poster: '', // 你的封面地址
				width: '500px', // 播放器宽度
				notSupportedMessage: '此视频暂无法播放，请稍后再试'
			},
			upImage: {
				timestamp: Math.round(new Date() * 1000),
				key: localStorage.getItem('token'),
				port: 'pc'
			},
			maxUpimage: 1
		};
	},
	watch: {
		'colorList.length': function(val) {
			this.maxUpimage = this.colorList.length;
			console.log(this.colorList.length);
		},
		skuLists: {
			handler: function(newVal, oldVal) {
				for (let i in newVal) {
					if (localStorage.getItem('factory_type') == 1) {
						if (this.DataCompare.skuLists[i].factory_price != newVal[i].factory_price) {
							newVal[i].retail_price = Math.ceil(newVal[i].factory_price * 2.5);
							newVal[i].self_price = Math.ceil(newVal[i].factory_price * 1.25);
							this.DataCompare.skuLists[i].factory_price = newVal[i].factory_price
						}
					} else {
						if (this.DataCompare.skuLists[i].factory_price != newVal[i].factory_price) {
							newVal[i].retail_price = Math.ceil(newVal[i].factory_price * 2.16);
							newVal[i].self_price = Math.ceil(newVal[i].factory_price * 1.08);
							this.DataCompare.skuLists[i].factory_price = newVal[i].factory_price
						}
					}
				}
			},
			deep: true
		},
		newSkuLists: {
			handler: function(newVal, oldVal) {
				for (let i in newVal) {
					console.log('旧',this.DataCompare.newSkuLists[i].factory_price);
					console.log('新',newVal[i].factory_price);
					if (localStorage.getItem('factory_type') == 1) {
						if (this.DataCompare.newSkuLists[i].factory_price != newVal[i].factory_price) {
							newVal[i].retail_price = Math.ceil(newVal[i].factory_price * 2.5);
							newVal[i].self_price = Math.ceil(newVal[i].factory_price * 1.25);
							this.DataCompare.newSkuLists[i].factory_price = newVal[i].factory_price
						}
					} else {
						if (this.DataCompare.newSkuLists[i].factory_price != newVal[i].factory_price) {
							newVal[i].retail_price = Math.ceil(newVal[i].factory_price * 2.16);
							newVal[i].self_price = Math.ceil(newVal[i].factory_price * 1.08);
							this.DataCompare.newSkuLists[i].factory_price = newVal[i].factory_price
						}
					}
				}
			},
			deep: true
		},
		sizeList: {
			handler: function(newVal) {
				this.CreateSkuForm.size = newVal[0].value;
			},
			deep: true
		},
		colorList: {
			handler: function(newVal) {
				this.CreateSkuForm.color = newVal[0].value;
			},
			deep: true
		},
		liningList: {
			handler: function(newVal) {
				this.CreateSkuForm.lining = newVal[0].value;
			},
			deep: true
		}
	},
	methods: {
		getInfoImg(info_img){
			this.NewinfoImg = info_img
			this.imageForm.info_img = info_img	
		},
		init() {
			let data = {
				goods_id: this.$route.query.id,
				paramter:1
			};
			this.$http(this.$ApiList.e_goods_list, data).then(res => {
				let goodsInfo = res.datas[0];
				this.goodsInfo.goods_id = this.$route.query.id;
				this.goodsInfo.goods_name = goodsInfo.goods_name;
				this.goodsInfo.lining_sn = goodsInfo.lining_sn;
				this.goodsInfo.goods_sn = goodsInfo.goods_sn;
				this.goodsInfo.number = goodsInfo.number;
				this.goodsInfo.factory_price = goodsInfo.factory_price;
				this.goodsInfo.bulk = goodsInfo.paramter.bulk;
				this.goodsInfo.express_price = goodsInfo.paramter.express_price;
				this.goodsInfo.lining_address = goodsInfo.lining_address;
				this.goodsInfo.recommend_good = goodsInfo.recommend_good;
				this.goodsInfo.contain = goodsInfo.paramter.contain
				this.goodsInfo.brief = goodsInfo.paramter.brief;
				this.goodsInfo.video = goodsInfo.video;
				this.goodsInfo.major_img_big = goodsInfo.image;
				this.imageForm.major_img_big = goodsInfo.image;
				this.goodsInfo.major_img_middle = goodsInfo.image_middle;
				this.goodsInfo.major_img_thumb = goodsInfo.image_thumb;
				this.goodsInfo.major_img_small = goodsInfo.major_img_small;

				this.vice_img_vice_big = goodsInfo.vice_big;
				this.vice_img_vice_middle = goodsInfo.vice_middle;
				goodsInfo.vice_middle.forEach(item => {
					this.vice_img_vice_preview.push({
						image: item
					})
				})

				this.info_img = goodsInfo.img_info;

				this.goodsInfo.is_sale = String(goodsInfo.is_sale);
				this.goodsInfo.style_id = goodsInfo.style_id;
				this.goodsInfo.space_id = goodsInfo.space_id;
				this.goodsInfo.class_id = goodsInfo.class_id;
				this.goodsInfo.install_id = String(goodsInfo.paramter.install_id);
				this.goodsInfo.filler_id = String(goodsInfo.paramter.filler_id);
				this.goodsInfo.craft_id = String(goodsInfo.paramter.craft_id);
				this.goodsInfo.pack_id = goodsInfo.paramter.pack_id;
				this.goodsInfo.save_id = goodsInfo.paramter.serve_id;
				this.goodsInfo.send_id = goodsInfo.paramter.send_id;
				this.goodsInfo.express_id = goodsInfo.paramter.express_id;
				this.goodsInfo.texture_id = goodsInfo.paramter.texture_id;
			});
			
			this.$http(this.$ApiList.e_get_goods_sku, data).then(res => {
				let sku_lists = res.datas;
				if(sku_lists.length !=0){
					sku_lists.forEach(item => {
						item.id = item.sku_id;
						item.number = item.sku_num;
						this.skuLists.push(item);
						this.DataCompare.skuLists.push({
							factory_price: item.factory_price
						});
					});
				}
			});
		},
		getClassify() {
			// 风格
			this.$http(this.$ApiList.StyleList).then(res => {
				this.StyleList = res.datas;
			});
			// 空间
			this.$http(this.$ApiList.SpaceList).then(res => {
				this.SpaceList = res.datas;
			});
			// 材质
			this.$http(this.$ApiList.TextureList).then(res => {
				this.TextureList = res.datas;
			});
			let data = {
				store_id: localStorage.getItem('store_id')
			};
			// 品类
			this.$http(this.$ApiList.ClassList, data).then(res => {
				this.ClassList = res.datas;
			});
		},
		// 图片上传 type 0上传sku图 1主图 2副图
		upload(params, type, index) {
			const file = params.file,
				isJPGPNG = file.type === 'image/jpeg' || 'image/png',
				isLt500KB = file.size / 1024 <= 500;
			if (!isJPGPNG) {
				this.$message.error('只能上传图片格式png、jpg!');
				return;
			}
			// if (!isLt500KB) {
			// 	this.$message.error('图片不能大于500K!');
			// 	return;
			// }
			const form = new FormData();
			form.append('file[]', file);
			switch (Number(type)) {
				case 0:
					this.$http(this.$ApiList.UpSkuImg, form).then(res => {
						this.skuImageList.push(res.datas[0]);
						this.skuImageListPreview.push({
							image:res.datas[0]
						});
						this.CreateSkuForm.color_img_vice_middle = this.skuImageList;
					});
					break;
				case 1:
					this.$http(this.$ApiList.mainUpload, form).then(res => {
						this.goodsInfo.major_img_big = res.datas[0].major_img_big;
						this.goodsInfo.major_img_middle = res.datas[0].major_img_middle;
						this.goodsInfo.major_img_thumb = res.datas[0].major_img_thumb;
						this.goodsInfo.major_img_small = res.datas[0].major_img_small;

						this.imageForm.major_img_big = res.datas[0].major_img_big;
					});
					break;
				case 2:
					this.$http(this.$ApiList.viceUpload, form).then(res => {
						this.vice_img_vice_middle.push(res.datas[0].vice_img_middle);
						this.vice_img_vice_big.push(res.datas[0].vice_img_big);
						this.vice_img_vice_preview.push({
							image:res.datas[0].vice_img_middle
						});
					});
					break;
				case 4:
					this.$http(this.$ApiList.publicUpload,form).then(res=>{
						console.log(index)
						this.skuLists[index].img = res.datas[0]
					})
					break;
			}
		},
		// 视频上传
		uploadVideo(params) {
			const file = params.file,
				isLt20MB = file.size / 1024 / 1024 < 20;
			if (!isLt20MB) {
				this.$message.error('视频不能大于20MB！');
				return;
			}
			const form = new FormData();
			form.append('file[]', file);
			this.$http(this.$ApiList.UpVideo, form).then(res => {
				this.goodsInfo.video = res.datas;
				this.$nextTick(() => {
					this.playerOptions.sources[0].src = res.datas;
				});
			});
		},
		// 添加 0 尺寸 1颜色 2材质
		addInput(type) {
			let item = {
				value: ''
			};
			if (type == 0) {
				this.sizeList.push(item);
			} else if (type == 1) {
				this.colorList.push(item);
			} else if (type == 2) {
				this.liningList.push(item);
			}
		},
		// 重置 0 尺寸 1颜色 2材质
		reset(type) {
			let item = [
				{
					value: ''
				}
			];
			if (type == 0) {
				this.sizeList = item;
			} else if (type == 1) {
				this.colorList = item;
			} else if (type == 2) {
				this.liningList = item;
			}
		},
		CreateSku(formName) {
			if(this.colorList.length != this.skuImageList.length){
				this.$layer.msg('有多少个颜色就要传多少张sku图');
				return
			}
			let data = {
				factory_id: localStorage.getItem('factory_id'),
				name_color: this.CreateSkuForm.name_color,
				name_lining: this.CreateSkuForm.name_lining,
				factory_price: this.goodsInfo.factory_price,
				goods_sn: this.goodsInfo.goods_sn,
				number: this.goodsInfo.number,
				sku_sn: this.goodsInfo.lining_sn,
				bulk: this.goodsInfo.bulk,
				pack_id: this.goodsInfo.pack_id
			};
			this.sizeList.forEach((item, i) => {
				if (item.value != '') {
					let num = i + 1;
					let size = 'size_name_' + num;
					data[size] = item.value;
					this.CreateSkuForm.size = item.value;
				}
			});
			this.colorList.forEach((item, i) => {
				if (item.value != '') {
					let num = i + 1;
					let color = 'color_name_' + num;
					data[color] = item.value;
					this.CreateSkuForm.color = item.value;
				}
			});
			this.liningList.forEach((item, i) => {
				if (item.value != '') {
					let num = i + 1;
					let lining = 'lining_name_' + num;
					data[lining] = item.value;
					this.CreateSkuForm.lining = item.value;
				}
			});
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$refs['CreateSkuForm'].validate(valid => {
						if (valid) {
							this.skuImageList.forEach((item, i) => {
								if (item.value != '') {
									let num = i + 1;
									let skuImage = 'color_img_vice_middle_' + num;
									data[skuImage] = item;
								}
							});
							data.lining_sn = this.goodsInfo.lining_sn
							this.$http(this.$ApiList.CreateSku, data).then(res => {
								this.newSkuLists = res.datas;
								res.datas.forEach(item => {
									this.DataCompare.newSkuLists.push({
										factory_price: item.factory_price
									});
								});
							});
						} else {
							this.$layer.msg('请填写完整信息后提交');
						}
					});
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		// 上传商品
		UploadProduct() {
			/* 	console.log('major_img_big',this.goodsInfo.major_img_big)
			console.log('info_img',this.info_img)
			console.log('vice_img_vice_big',this.vice_img_vice_big)
			console.log('vice_img_vice_middle',this.vice_img_vice_middle) */

			if (this.skuLists.length == 0 && this.newSkuLists.length == 0) {
				this.$layer.msg('至少要有一个sku');
				return;
			}
			this.goodsInfo.name_lining = this.CreateSkuForm.name_lining;
			this.goodsInfo.name_color = this.CreateSkuForm.name_color;
			this.goodsInfo.name_size = this.CreateSkuForm.name_size;

			this.goodsInfo.info_img = this.NewinfoImg.join(',');
			this.goodsInfo.vice_img_vice_big = this.vice_img_vice_big.join(',');
			this.goodsInfo.vice_img_vice_middle = this.vice_img_vice_middle.join(',');

			this.imageForm.info_img = this.NewinfoImg.join(',');
			this.imageForm.vice_img_vice_middle = this.vice_img_vice_middle.join(',');

			this.$refs['goodsInfo'].validate(valid => {
				if (valid) {
					this.$refs['imageForm'].validate(valid => {
						if (valid) {
							if (this.newSkuLists.length != 0) {
								let data = {
									upimg: JSON.stringify(this.newSkuLists),
									goods_id: this.$route.query.id,
									factory_id: localStorage.getItem('factory_id'),
									color_name: this.CreateSkuForm.name_color,
									lining_name: this.CreateSkuForm.name_lining,
									size_name: '尺寸'
								};
								this.$http(this.$ApiList.FactoryAddGoodsSku, data).then(res => {
									if(res.code==203){
										this.$confirm(res.error, '提示', {
											confirmButtonText: '确定',
											showCancelButton: false,
											type: 'error'
										});
										return false
									}
									let skuList = [];
									if (this.skuLists.length != 0) {
										this.skuLists.forEach(item => {
											skuList.push(item);
										});
									}
									if (res.datas.length != 0) {
										res.datas.forEach(item => {
											skuList.push(item);
										});
									}
									this.goodsInfo.upimg = JSON.stringify(skuList);
									this.goodsInfo.is_sale = 1
									this.$http(this.$ApiList.FactoryGoodsEditChange, this.goodsInfo).then(res => {
										this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {});
										this.$layer.msg(res.datas);
										this.$router.push({ path: '/factory_operate' });
									});
								});
							} else {
								this.goodsInfo.upimg = JSON.stringify(this.skuLists);
								this.goodsInfo.is_sale = 1
								this.$http(this.$ApiList.FactoryGoodsEditChange, this.goodsInfo).then(res => {
									this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {});
									this.$layer.msg(res.datas);
									this.$router.push({ path: '/factory_operate' });
								});
							}
							//console.log(this.goodsInfo);
						} else {
							this.$layer.msg('请填写完整信息后提交');
						}
					});
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		delSku(type, index, sku_id) {
			this.$confirm('删除后不可恢复，是否确认删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					if (type == 0) {
						this.newSkuLists.splice(index, 1);
					} else {
						let data = {
							sku_id: sku_id
						};
						this.$http(this.$ApiList.FactoryDelGoodsSku, data).then(res => {
							this.$layer.msg('删除成功');
							this.skuLists.splice(index, 1);
						});
					}
				})
				.catch(() => {});
		},
		// 删除附图
		delVice(index, type) {
			this.$confirm('删除后不可恢复，是否确认删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					if (type == 1) {
						this.vice_img_vice_middle.splice(index, 1);
						this.vice_img_vice_big.splice(index, 1);
						this.vice_img_vice_preview.splice(index, 1);
					} else {
						this.info_img.splice(index, 1);
					}
				})
				.catch(() => {});
		},
		// 重置图片
		restImg(type) {
			switch (type) {
				case 'sku':
					this.skuImageList = [];
					this.skuImageListPreview = [];
					break;
				case 'vice':
					this.vice_img_vice_middle = [];
					this.vice_img_vice_big = [];
					this.vice_img_vice_preview = [];
					break;
				case 'infoImg':
					this.info_img = [];
					break;
					case 'video':
						this.goodsInfo.video = '';
						break;
			}
		},
		getSign() {
			let data = this.upImage;
			// 获取签名开始
			let obj = 'jjds2020+';
			let newObj = this.objKeySort(data);
			for (let i in newObj) {
				obj += i + '=' + newObj[i] + '&';
			}
			obj = obj.substring(0, obj.length - 1);
			obj += '+jjds2020';
			obj = md5(obj);
			obj = obj.toUpperCase();
			// 获取签名结束
			this.upImage.sign = obj;
		},
		// 参数排序
		objKeySort(obj) {
			var newkey = Object.keys(obj).sort();
			var newObj = {};
			for (var i = 0; i < newkey.length; i++) {
				newObj[newkey[i]] = obj[newkey[i]];
			}
			return newObj;
		}
	},
	created() {
		this.init();
		this.getClassify();
		this.getSign();
	}
};
</script>

<style lang="scss">
.add-goods .main-image .el-upload {
	background-color: #fbfdff;
	border: 1px dashed #c0ccda;
	border-radius: 6px;
	box-sizing: border-box;
	width: 148px;
	height: 148px;
	cursor: pointer;
	line-height: 146px;
	vertical-align: top;
}
.add-goods .main-image .el-upload .el-icon-plus {
	font-size: 28px;
	color: #8c939d;
}

.add-goods .detail-image .el-upload-list--picture .el-upload-list__item {
	height: auto;
}
.add-goods .detail-image .el-upload-list__item img {
	width: 100%;
	height: 100%;
}

.add-sku-form .el-form-item {
	margin-bottom: 0 !important;
}
.add-sku-form .el-form-item__content {
	margin-left: 0 !important;
}
.add-sku-form-item {
	display: flex;
}
.add-sku-form-menu {
	min-width: 100px;
}
.add-sku-form-menu span {
	display: inline-block;
	margin-left: 10px;
	line-height: 60px;
	color: #00a0e9;
	cursor: pointer;
}

.add-sku-form .el-input {
	width: 200px;
	margin-left: 10px;
	margin-top: 10px;
}
.add-goods .detail-image .el-upload-list--picture .el-upload-list__item {
	height: auto;
	width: 950px;
}
.add-goods .detail-image .el-upload-list__item img {
	width: 900px;
	height: 100%;
}
.add-goods .el-form-item__content {
	max-width: 845px;
}
.add-goods {
	.el-select {
		width: 100%;
	}
	.last {
		margin-bottom: 0;
	}
	.upload-drag {
		.el-upload {
			vertical-align: top;
		}
		.el-upload__tip {
			line-height: normal;
		}
	}
	.case_upload {
		display: flex;
		flex-wrap: wrap;
		.el-col {
		}
	}
	.el-select {
		display: block;
	}
	.upload-box {
		padding-left: 40px;
		.case-img-upload {
			display: flex;
			.case-img-upload-imgs {
				flex: 1;
				align-items: flex-start;
				.el-image {
					width: 140px;
					height: 140px;
					border: solid 1px #e5e5e5;
					margin-left: 25px;
					vertical-align: top;
				}
			}
			.case-img-upload-imgs-info {
				width: 100%;
				max-width: 660px;
				border: solid 1px #e5e5e5;
				margin-left: 25px;
				min-height: 390px;
				.case-img-upload-imgs-info-box {
					position: relative;
					.el-icon-error {
						position: absolute;
						font-size: 20px;
						color: #ef3030;
						right: 5px;
						top: 5px;
						z-index: 1;
						background-color: #fff;
						border-radius: 50%;
						cursor: pointer;
					}
				}
				.el-image {
					width: 100%;
					vertical-align: top;
				}
			}
			.vice_big_box {
				position: relative;
				display: inline-block;
				vertical-align: top;
				margin-bottom: 20px;
				.el-icon-error {
					position: absolute;
					font-size: 20px;
					color: #ef3030;
					right: 5px;
					top: 5px;
					z-index: 1;
					background-color: #fff;
					border-radius: 50%;
					cursor: pointer;
				}
			}
		}
		.el-upload__tip {
			width: 80px;
			text-align: center;
		}
		.el-form-item__label {
			float: none;
		}
		.el-form-item__content {
			margin-left: 0 !important;
			.el-button--danger {
				width: 80px;
				background-color: #37c1d6;
				border-color: #37c1d6;
			}
		}
	}
}
.add-goods .el-input__inner{
	padding: 0 10px;
}
</style>
